<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="common/commonVant::commonStaticVant"></div>
    <script th:src="@{/common/localStorage.js}"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app" v-cloak>
    <div style="margin-bottom: 300px;">
        <p class="title" th:text="${article.articleTitle}"></p>
        <van-row>
            <van-divider>文章明细</van-divider>
        </van-row>
        <transition name="van-fade">
            <van-row>
                <van-col span="8" offset="1">
                    <van-icon name="user-o"/>
                    <span th:text="${user.username}"></span>
                </van-col>
                <van-col span="8">
                    <van-icon name="aim"/>
                    <span th:text="${#dates.format(article.createdTime,'yyyy-MM-dd HH:ss')}"></span>
                </van-col>
                <van-col span="6">
                    <p th:text="${article.tabContent}"></p>
                </van-col>
            </van-row>
        </transition>
        <van-row>
            <van-divider>文章内容</van-divider>
        </van-row>
        <transition name="van-fade">
            <van-row>
                <van-col offset="1" :span="22">
                    <p th:text="${article.articleContent}"></p>
                </van-col>
            </van-row>
        </transition>
        <van-row>
            <van-divider>评论内容</van-divider>
        </van-row>
        <van-row>
            <van-col span="22" offset="1">
                <van-row>
                    <van-cell-group>
                        <van-field
                                v-model="comment.commentContent"
                                rows="2"
                                autosize
                                label="此处评论"
                                type="textarea"
                                maxlength="50"
                                placeholder="请输入评论"
                                show-word-limit
                        />
                    </van-cell-group>
                </van-row>
                <van-row>
                    <van-cell-group>
                        <van-button round block type="info" native-type="submit" @click="addComment">
                            发布
                        </van-button>
                    </van-cell-group>
                </van-row>
                <van-row>
                    <van-tabs>
                        <van-tab v-for="(item,index) in commentList" :title="'评论 ' + (index+1)" :key="index">
                            <van-row style="height: 100px;margin-top: 10px;">
                                <van-col span="4" style="display: flex;justify-content: center;">
                                    <img width="50" height="50" :src="item.picture"
                                         style="border-radius: 50%;margin-top: 10px;"/>
                                </van-col>
                                <van-col span="20">
                                    <van-row>
                                        <van-col span="8">
                                            <p class="van-ellipsis">{{item.username}}</p>
                                        </van-col>
                                        <van-col span="10" offset="6">
                                            <p>{{item.createdTime|time}}</p>
                                        </van-col>
                                    </van-row>
                                    <van-row>
                                        <p style="margin-top: 5px;">{{item.content}}</p>
                                    </van-row>
                                    <van-row style="margin-top: 5px;">
                                        <van-col span="2">
                                            <van-icon name="thumb-circle-o"/>
                                        </van-col>
                                        <van-col span="2">
                                            <van-icon name="chat-o"/>
                                        </van-col>
                                    </van-row>
                                    <!--                            <van-row>-->
                                    <!--                                <van-col span="23">-->
                                    <!--                                    <van-field v-model="message" rows="2" autosize type="textarea" maxlength="50"-->
                                    <!--                                               placeholder="请输入回复内容" show-word-limit style="border: 1px solid red;">-->
                                    <!--                                        <template #label>-->
                                    <!--                                            <p class="van-ellipsis">回复 {{item.username}}</p>-->
                                    <!--                                        </template>-->
                                    <!--                                    </van-field>-->
                                    <!--                                </van-col>-->
                                    <!--                            </van-row>-->
                                </van-col>
                            </van-row>
                        </van-tab>
                    </van-tabs>
                </van-row>
            </van-col>
        </van-row>
    </div>
    <van-notify v-model="successShow" type="success">
        <span>{{successMessage}}</span>
    </van-notify>
    <van-notify v-model="failShow" type="danger">
        <span>{{failMessage}}</span>
    </van-notify>
    <van-row class="operate">
        <van-col span="6">
            <van-icon name="like-o" :color="hasCollected?'#ee0a24':'#1989fa'" @click="collect" size="25"
                      class="icon_bottom"/>
        </van-col>
        <van-col span="6">
            <van-icon name="chat-o" color="#1989fa" size="25" class="icon_bottom"/>
        </van-col>
        <van-col span="6">
            <van-icon name="good-job-o" :color="hasStared?'#ee0a24':'#1989fa'" @click="star" size="25"
                      class="icon_bottom"/>
        </van-col>
        <van-col span="6">
            <van-icon name="aim" color="#1989fa" size="25" class="icon_bottom" @click="showShare=true"/>
        </van-col>
    </van-row>
    <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="shareOptions"
            @select="selectShareType"
    />
</div>
<script>
    let mvvm = new Vue({
        el: "#app",
        data: {
            message: '',
            showShare: false,
            shareOptions: [
                {name: '微信', icon: 'wechat'},
                {name: '微博', icon: 'weibo'},
                {name: '复制链接', icon: 'link'},
                {name: '分享海报', icon: 'poster'},
                {name: '二维码', icon: 'qrcode'},
            ],
            hasStared: false,
            hasCollected: false,
            loginShow: false,
            showPicker: false,
            tabMenuList: [],
            failShow: false,
            successMessage: '',
            successShow: false,
            failMessage: '',
            value: '',
            request: {
                articleTitle: '',
                articleContent: '',
                tabContent: '',
            },
            comment: {
                commentContent: '',
                articleId: window.location.href.split("/")[window.location.href.split('/').length - 1],
            },
            token: '',
            id: '',
            commentList: []
        },
        filters: {
            time(value) {
                let date = new Date(value);
                let minute = date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes();
                let month = date.getMonth() >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
                let day = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate();
                let hour = date.getHours() >= 10 ? date.getHours() : '0' + date.getHours();
                return `${date.getFullYear()}-${month}-${day} ${hour}:${minute}`
            }
        },
        methods: {
            async addComment() {
                const result = await httpPost('/comment/addComment', this.comment, {'Authorization': this.token});
                if (result.code == 200) {
                    this.selectComment();
                } else if (result.code == 205 || result.code == 206) {
                    window.location.href = '/home/login';
                } else {
                    vant.Toast.fail(result.message);
                }
            },
            onConfirm(value) {
                this.request.tabContent = value;
                this.showPicker = false;
            },
            mobileValidator(val) {
                return /^[1][3,5,7,8][0-9]{9}$/.test(val);
            },
            async submitForm(value) {
                const result = await httpPost('/article/pushArticle', this.request, {'Authorization': this.token});
                if (result.code == 200) {
                    this.successMessage = result.message;
                    this.successShow = true;
                    setTimeout(() => {
                        this.successShow = false;
                    }, 2000);
                } else {
                    this.failMessage = result.message;
                    this.failShow = true;
                    setTimeout(() => {
                        this.failShow = false;
                    }, 2000);
                }
            },
            async getTabMenu() {
                const result = await httpPost("/tabMenu/getTabMenu");
                if (result.code == 200) {
                    for (let i of result.data) {
                        this.tabMenuList.push(i.tabContent);
                    }
                } else {

                }
            },
            login() {
                window.location.href = '/home/login'
            },
            async addStars() {
                const result = await httpPost("/stars/addStars", {articleId: this.articleId}, {'Authorization': this.token});
                if (result.code == 200) {
                    this.hasStared = true;
                } else if (result.code == 206) {
                    window.location.href = window.location.origin + '/home/login';
                }
            },
            async deleteStars() {
                const result = await httpPost("/stars/deleteStars", {articleId: this.articleId}, {'Authorization': this.token});
                if (result.code == 200) {
                    await this.selectStars();
                } else if (result.code == 206) {
                    window.location.href = window.location.origin + '/home/login';
                }
            },
            async selectStars() {
                const result = await httpPost("/stars/selectStars", {articleId: this.articleId}, {'Authorization': this.token});
                if (result.code == 200 && result.data.length > 0) {
                    this.hasStared = true;
                } else {
                    this.hasStared = false;
                }
            },
            star() {
                if (!this.hasStared) {
                    this.addStars();
                } else {
                    this.deleteStars();
                }
            },
            async addCollections() {
                const result = await httpPost("/collections/addCollections", {articleId: this.articleId}, {'Authorization': this.token});
                if (result.code == 200) {
                    this.hasCollected = true;
                } else if (result.code == 206) {
                    window.location.href = window.location.origin + '/home/login';
                }
            },
            async deleteCollections() {
                const result = await httpPost("/collections/deleteCollections", {articleId: this.articleId}, {'Authorization': this.token});
                if (result.code == 200) {
                    await this.selectCollections();
                } else if (result.code == 206 || result.code == 205) {
                    window.location.href = window.location.origin + '/home/login';
                }
            },
            async selectCollections() {
                const result = await httpPost("/collections/selectCollections", {articleId: this.articleId}, {'Authorization': this.token});
                if (result.code == 200 && result.data.length > 0) {
                    this.hasCollected = true;
                } else {
                    this.hasCollected = false;
                }
            },
            collect() {
                if (!this.hasCollected) {
                    this.addCollections();
                } else {
                    this.deleteCollections();
                }
            },
            selectShareType(option) {
                if (option.name == "二维码") {
                    window.location.href = window.location.origin + '/home/QRCode?Authorization=' + this.token + '&url=' + window.location.href;
                }
                this.showShare = false;
            },
            async selectComment() {
                const result = await httpGet("/comment/selectComment?articleId=" + this.id);
                this.commentList = result.data;
            }
        },
        computed: {
            articleId() {
                return window.location.href.split("/")[window.location.href.split('/').length - 1];
            }
        },
        mounted() {
            this.getTabMenu();
            this.token = window.getLocalStorage("token");
            this.token ? this.loginShow = false : this.loginShow = true;
            this.selectStars();
            this.selectCollections();
            this.id = window.location.href.split("/")[window.location.href.split('/').length - 1];
            this.selectComment();
        },
    })
</script>
<script th:inline="javascript">
</script>
</body>
<style>
    .title {
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 18px;
    }

    .operate {
        height: 60px;
        position: fixed;
        bottom: 0;
        justify-content: center;
        background: gainsboro;
        width: 100%;
        text-align: center;
    }

    .icon_bottom {
        line-height: 60px;
    }
</style>
</html>